<template>
	<view>
		<view class="page__content">
			<z-paging ref="paging" v-model="tableData" @query="queryList" :auto="true" :topZIndex="99999"
				:bottomZIndex="999999">
				<template #top>
					<up-navbar :fixed="false" title="SPC统计过程控制模块" :autoBack="true" :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
					</up-navbar>


					<view class="page__content__search">
						<up-search :showAction="true" v-model="filterConfig.SearchKey" searchIcon=" " shape="square"
							actionText="搜索" @search="onSearch" @custom="onSearch" :actionStyle="{color:'#fff'}"
							:animation="false">
						</up-search>
					</view>

				</template>

				<view class="lab-card" v-for="(item, index) in tableData" :key="index"
					@click="innerCellClick(item, index)">
					<!-- 顶部栏 -->
					<view class="lab-card__top">
						<view class="top-left">
							<text class="index">#{{ index + 1 }}</text>
							<text class="bill-no">{{ item.BillNO }}</text>
						</view>
						<!-- <text class="bill-date">{{ item.BillDate }}</text> -->
					</view>

					<!-- 产品信息 -->
					<view class="product-info">
						<view class="x-f" style="font-weight: 600;color: #000;">
							检验项：
							<text>{{item.LabTestProjectTypeName}}</text>
							<text>--</text>
							<!-- <text>{{item.LabTestPlanContent}}</text> -->
							<!-- <text>--</text> -->
							<text>{{item.LabTestProjectName}}</text>
						</view>

						<text>
							产品：{{ item.ProductCode }} ｜ {{ item.ProductName }} ｜ {{ item.ProductSpec }}
						</text>
						<view class="x-f">
							<text>抽检数：</text>
							<text>{{item.CJNum}}</text>
						</view>
						<view class="x-f">
							<view>
								<text>上限：</text>
								<text>{{ +(item.PoorWork) }}</text>
							</view>
							<view style="margin-left: 20rpx;">
								<text>目标值：</text>
								<text>{{ item.JYBZ }}</text>
							</view>
							<view style="margin-left: 20rpx;">
								<text>下限：</text>
								<text>{{ +(item.PoorNormally) }}</text>
							</view>
						</view>
					</view>

				</view>

			</z-paging>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, onMounted, ref, nextTick, getCurrentInstance, watch } from 'vue'
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
	import { useMainStore, useQmsStore, usePermissionStore, useUserStore, useBluetoothStore } from '@/store';
	const qmsStore = useQmsStore();
	const mainStore = useMainStore();
	const permissionStore = usePermissionStore();
	const userStore = useUserStore();
	const bluetoothStore = useBluetoothStore();
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onAllComplete, onError } = useRequestQueue();


	interface pagingInstance {
		reload : () => void;
		refresh : () => void;
		complete : () => void;
		setLocalPaging : () => void;
	}
	let paging = ref<pagingInstance | any>(null);

	let filterConfig = reactive<any>({
		SearchKey: ""
	});

	const onSearch = () => {
		paging.value.reload();
	}

	let tableData = ref<any>([]);

	const innerCellClick = (item : any, index : number) => {
		const {
			SamplingSchemeID,
			ProductID,
			CJNum,
			LabTestProjectID,
			PoorWork,
			PoorNormally,
			JYBZ
		} = item;


		uni.navigateTo({
			url: "/st_qms/page_spc/spc_chart" +
				`?LabTestProjectID=${LabTestProjectID}&CJNum=${CJNum}&ProductID=${ProductID}&SamplingSchemeID=${SamplingSchemeID}&usl=${PoorWork}&lsl=${PoorNormally}&target=${JYBZ}`
		})
	}

	const queryList = (pageNo : number) => {
		request({
			config: {},
			url: 'Qu_LabTestProjectItemList',
			method: 'POST',
			data: {
				PageIndex: pageNo,
				PageSize: 20
			},
			success: async (ret : any) => {
				console.log(ret);
				if (ret.status == 200) {
					paging.value.complete(ret.data.ds);
				}

			}

		})

	}
</script>

<style lang="scss">
	.page__content {
		height: 100vh;
		background-color: #f9f9f9;


		.lab-card {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
			padding: 24rpx;
			margin: 20rpx 16rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			border-left: 8rpx solid #4b8df8;
			transition: transform 0.2s;

			&:active {
				transform: scale(0.98);
			}

			.lab-card__top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top-left {
					display: flex;
					align-items: center;
					gap: 12rpx;

					.index {
						font-size: 26rpx;
						font-weight: bold;
						color: #4b8df8;
					}

					.bill-no {
						font-size: 28rpx;
						font-weight: 600;
						color: #1f2d3d;
						background-color: #eaf1ff;
						padding: 2rpx 8rpx;
						border-radius: 8rpx;
					}
				}

				.bill-date {
					font-size: 24rpx;
					color: #999;
				}
			}

			.product-info {
				font-size: 24rpx;
				color: #333;
				background-color: #eef4fc;
				padding: 16rpx;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				gap: 6rpx;
				line-height: 1.6;

				.x-f {
					display: flex;
					font-size: 24rpx;
					color: #666;

					view {
						display: flex;
						align-items: center;
					}
				}
			}

			.deadline-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fffbe8;
				border: 1px dashed #f1c40f;
				padding: 12rpx;
				border-radius: 8rpx;
				font-size: 24rpx;

				.deadline-text {
					color: #7a7a7a;
				}

				.deadline-status {
					font-weight: bold;
				}

				.overdue {
					color: #e74c3c;
				}

				.normal {
					color: #2ecc71;
				}
			}

			.content-list {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				padding: 12rpx 0;

				.content-row {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content-text {
						font-size: 24rpx;
						color: #444;
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.content-icon {
						margin-left: 12rpx;
						opacity: 0.75;
						font-size: 26rpx;
					}
				}
			}

			.card-footer {
				display: flex;
				justify-content: flex-end;
				font-size: 24rpx;
				color: #666;
				border-top: 1px solid #eee;
				padding-top: 10rpx;

				.footer-name {
					font-weight: 600;
					color: #2c3e50;
					margin-left: 6rpx;
				}
			}
		}
	}
</style>